.<template>
  <div class="schedule box clearfix">
    <h4 class="caption">会议日程</h4>
    <div class="date box">
      <el-date-picker
      type="date"
      popper-class='datetime'
      placeholder="选择日期">
    </el-date-picker>
    </div>
    <ul class="infinite-list metList" 
    v-infinite-scroll="load" 
    style="overflow:auto;">
      <li class="box item" v-for="i in count" :key="i">
        <p class="title">第十三届全国人民{{i}}</p>
        <span class="site">人民大会堂2021-03-05</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    load () {
      this.count += 2
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  border-radius: 20px;
  box-shadow: 4px 3px 7px 0px #00000036;
  letter-spacing: 5px;
  .caption {
    margin:5px 15px;
    font-size: 25px;
    font-weight: normal;
    color: #5E5E5E;
  }
}
.schedule {
  width: 100%;
  height: 448px;
  padding: 15px 25px 20px 15px;
  .date {
    float: left;
    width: 375px;
    height: 375px;
    margin-right: 20px;
    padding-left: 10px;
  }
  .metList {
    float: left;
    height: 375px;
    width: 1160px;
    padding-right: 5px;
    .item {
      height: 90px;
      display: flex;
      flex-direction: column;
      justify-content:space-evenly;
      padding: 5px 10px;
      margin-bottom: 10px;
      .title {
        font-size: 25px;
        color: #5E5E5E;
      }
      .site {
        font-size: 20px;
        color: #7A7A7A;
      }
    }
  }
}
.datetime {
  display: block;
}
</style>